<template>
  <div>APP!</div>
  <div>reactive&ref细节问题</div>
  <h3>{{ m1 }}</h3>
  <h3>{{ m2.name }}</h3>
  <h3>{{ m3.name }}</h3>
  <button @click="update">更新数据</button>
</template>

<script lang="ts">
import {defineComponent, ref, reactive} from 'vue';

export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    const m1 = ref('abc')
    const m2 = reactive({
      name:'小米'
    })
    const m3 = ref({
      name:'华为'
    })

    const update = () => {
      console.log('update')
      console.log(m1)
      console.log(m2)
      console.log(m3)  //ref中放入对象，则是经过reactive处理，形成一个proxy对象
    }
    return {
      m1, m2, m3, update
    }
  }
});
</script>

<style>

</style>
